<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_state</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
  /*
  需求: 自定义组件, 功能说明如下
    1. 显示h2标题, 初始文本为: 你喜欢我
    2. 点击标题更新为: 我喜欢你
  */
  class Like extends React.Component {
    constructor (props) {
      super(props)

      // 初始化状态
      this.state = {
        isLikeMe: true
      }
      // 绑定this为组件对象
      // this.change = this.change.bind(this)
    }

    change = () => {
      console.log('change', this)
      // 更新状态: this.setState()
      // this.state.isLikeMe = !this.state.isLikeMe // 不能更新更新某个状态
      this.setState({
        isLikeMe: !this.state.isLikeMe
      })
    }

    render () {
      console.log('render()')
      let text = this.state.isLikeMe ? '你喜欢我' : '我喜欢你'
      return <h2 onClick={this.change}>{text}</h2>
    }
  }
  ReactDOM.render(<Like />, document.getElementById('example'))
</script>
</body>
</html>